<template>
  <div class="infobar-wrap">
    <div class="info-bar">
      <span>@{{ videoItem.name }}</span>
    </div>
    <div class="info-bar" style="padding-bottom: 13px;">
      <span>{{ videoItem.description }}</span>
    </div>
    <!--    <div class="info-bar music">-->
    <!--      <span class="music-icon">🎶</span>-->
    <!--      <div class="desc">-->
    <!--        <span data-text="">养生真的很重要，我每天早上都会喝一杯温水!</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="footer" @click="showComment()">
      <img src="@/assets/title3.png"/>
      <van-button
          class="search"
          type="default"
          round
          size="small">我来说几句
      </van-button>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "infoBar",
  data() {
    return {
      text: ''
    }
  },
  computed: {
    ...mapState('share', ['videoItem']),
  },
  methods: {
    showComment() {
      this.$parent.callRightBarMethod()
    }
  }
};
</script>

<style lang="less" scoped>
.infobar-wrap {
  position: fixed;
  bottom: 0%;
  width: 100%;
  //padding: 10px;
  z-index: 999;

  .info-bar {
    padding: 10px 10px 0 10px;
    font-size: 17px;
    font-weight: 400;
    line-height: 24.62px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    width: 302px;
  }

  .footer {
    width: 100%;
    //z-index: 999;
    background: #ffffff;
    font-size: 15px;
    padding: 10px 10px;
    height: 32px;
    line-height: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .search {
      font-size: 15px;
      color: #a7a7a7;
      width: 300px;
      margin-left: 11px;
      border-radius: 15px;
      border: solid 1px #eeeeee;
      background: rgba(229, 229, 229, 1);
    }

    img {
      width: 33px;
      height: 33px;
    }

    /deep/ .el-input .el-input__inner {
      border-radius: 15.5px;
      background-color: rgba(229, 229, 229, 1);
    }

    /deep/ .el-input__inner {
      border: none;
    }
  }

  .music {
    display: flex;
  }

  .music-icon {
    padding-right: 10px;
  }

  .desc {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;

    span {
      display: inline-block;
      animation: scroll 5s linear infinite;

      &::after {
        content: attr(data-text);
        margin-left: 20px;
      }
    }
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-50% - 20px));
      //transform: translateX(-80%);
    }
  }
}
</style>